<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/si.css">
</head>
<body>
    <div class="all"><!--flex纵向布局--> 
        <div id=win style="display:none; POSITION:absolute; left:50%; top:50%; width:300px; height:200px; margin-left:-300px; margin-top:-200px; border:1px solid #888;  text-align:center">欢迎登录小黑屋<br>
        <form>
    用户：
    <input type="text" name="user">
    <br/>
    密码：
    <input type="password" name="password">
    </form>
        <a href="javascript:closeLogin();">
<button> 退出</button></a>
<a href="javascript:closeLogin();">
<button> 登录</button></a>
</div>
        <div id="thediv" onmouseover="pause_resume(true)" onmouseout="pause_resume(false)"></div>
        <div class="tou"><!--flex纵向布局--> 
            <div class="one"><!--flex横向布局--> 
                <a class="u" href="">logo</a><!--图片-->
                <p class="u">选择学校 <select>
                    <option>家里蹲大学</option>
                    <option>社会大学</option>
                    <option>监狱大学</option>
                    <option>8F201渣男大学</option>
                    <option>渣女大学</option>
                </select></p><!--可选择高校--> 
                <a class="u" href="">首页</a>
                <a class="u" href="">我有闲置</a>
                <a class="u" href="">我要租借</a>
                <a class="u" href="">客服</a>
                <a class="u" href="">热线电话</a>
                <a class="u" href="javascript:openLogin();">登录</a>
            </div>
                <div class="two">
                     <div id="box">
                        <input type="text" name="search" placeholder="请输入关键字"><!--搜索框-->
                        <div id="search" >搜索</div> 
                    </div>
                </div>
        </div>
        <div class="zhong">
           
           
    <a href="https://item.taobao.com/item.htm?id=594961722467&ali_refid=a3_430673_1006:1121511451:N:0Bo%2B1WbOntC1a1xhawPNA9%2BiNPdcXqt6:3107e07d0620f3ce825c19d678b75dfa&ali_trackid=1_3107e07d0620f3ce825c19d678b75dfa&spm=a2e15.8261149.07626516002.9"><img src="../img/251.jpg" ></a>
    <h1>点它有惊喜</h1>
        </div>



        <div class="wei">
            <p class="wei1">
                <d>天使集团</d>
                <d>|</d>
                <d>关于小黑屋</d>
                <d>|</d>
                <d>合作伙伴</d>
                <d>|</d>
                <d>廉正举报</d>
                <d>|</d>
                <d>法律声明</d>
                <d>|</d>
            </p>
            <p class="wei2">
                <d>董事长：钢铁侠</d>
                <d>|</d>
                <d>CEO：美国队长</d>
                <d>|</d>
                <d>总经理：黑寡妇</d>
                <d>|</d>
                <d>产品经理：幻视</d>
                <d>|</d>
                <d>人力资源总监：绯红女巫</d>
                <d>|</d>
            </p>
            <p class="wei3">
                <d>本网站由复仇者联盟独家赞助</d>
                <d>|</d>
                <d>本网站出售产品均为战争所得（三无产品）</d>
                <d>|</d>
            </p>
        </div>
    </div>  


    <script type="text/javascript">
         var dao=document.getElementsByClassName('dao')/*  导航按钮*/
         var dao1=document.getElementsByClassName('tuo')
         function openLogin(){
   document.getElementById("win").style.display="";
}
function closeLogin(){
   document.getElementById("win").style.display="none";
}
         for (var i = dao.length - 1; i >= 0; i--) {
            dao[i].index=i;
            dao[i].onclick=function(){
                for (var j = dao.length - 1; j >= 0; j--) {
                    dao[j].className="";
                }
                this.className="dao d";
                for (var i = dao1.length - 1; i >= 0; i--) {
                    dao1[i].style.display="none";
                }
                dao1[this.index].style.display="block";
            }
         }/*  导航按钮*/
         /* 搜索弹出窗口*/
         $(document).ready(function(){
            $('#search').click(function(){
                alert("别点了！！啥都没有！！")
            })
         })
            $(function(){
        
         var index = 0;
         var i = index;
         var nums = $('ul.num li');
         var imgs = $('ul.img li');
         $('ul.num li').click(function(){
              $(this).addClass('active').siblings().removeClass('active');

           index =  $(this).index();
           $('ul.img li').eq(index).fadeIn(2000).siblings().fadeOut(2000);
                                         })

var h=setInterval(move,2000) /*setInterval每隔多久执行一次函数*/
        function move(x='right'){
            if(x=='right')/* 通过加减来控制方向以此实现按钮左右功能*/
            i= ++i% nums.length;
        else
            i= --i% nums.length;
            nums.eq(i).addClass('active').siblings().removeClass('active');/*addclass增加一个类名  removeclass删去一个类名*/
            imgs.eq(i).fadeIn(2000).siblings().fadeOut(2000); /**/
        }
        $('.outer').hover(function(){
            clearInterval(h)
        },function(){
            h= setInterval(move,2000);
        })
        $('.left').click(function(){
            move('left');
        })
        $('.right').click(function(){
            move();
        })
                })
    </script>   
</body>
</html>